<template>
  <div class="statistics1-container">
    <div class="query-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="报表">
          <el-select v-model="query.dateType" @change="dateTypeChange">
            <el-option label="日报" value="HOUR"></el-option>
            <el-option label="月报" value="DAY"></el-option>
            <el-option label="年报" value="MONTH"></el-option>
            <!-- <el-option label="汇总" value="all"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="建筑">
          <el-select v-model="query.building">
            <el-option
              :label="item.lable"
              :value="item.value"
              v-for="(item, index) in buildingList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-if="query.dateType === 'HOUR'"
            v-model="query.date"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
          <el-date-picker
            v-if="query.dateType === 'DAY'"
            v-model="query.date"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择月份"
          ></el-date-picker>
          <el-date-picker
            v-if="query.dateType === 'MONTH'"
            v-model="query.date"
            type="year"
            format="yyyy年"
            value-format="yyyy"
            placeholder="选择年份"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="用能类型">
          <el-select v-model="query.type">
            <el-option
              :label="item.lable"
              :value="item.value"
              v-for="(item, index) in typeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryClick">查询</el-button>
          <el-button type="success" @click="exportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table :data="[1]" style="width: 100%;">
        <el-table-column label="建筑" v-if="!tableData.length" style="background: #F5F7FA">
          {{ building | buildingFilter }}
          <el-table-column :label="dateLabel(item)" v-for="(item, index) in tableData" :key="index">
            <el-table-column label="用量（KW/h）">{{ item.powerSum / 1000 }}</el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="建筑" v-else>
          <el-table-column label="建筑">{{ building | buildingFilter }}</el-table-column>
          <el-table-column :label="dateLabel(item)" v-for="(item, index) in tableData" :key="index">
            <el-table-column label="用量（KW/h）">{{ item.powerSum / 1000 }}</el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="page-container">
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>-->
  </div>
</template>

<script>
import moment from "moment";
import axios from "axios";

let self;

export default {
  filters: {
    buildingFilter(el) {
      return self.buildingList.filter(item => el === item.value)[0]
        ? self.buildingList.filter(item => el === item.value)[0].lable
        : "-";
    }
  },
  data() {
    return {
      query: {
        dateType: "HOUR",
        building: "",
        date: moment().format("YYYY-MM-DD"),
        type: "coolingLoad"
      },
      typeList: [
        {
          lable: "冷负荷",
          value: "coolingLoad"
        },
        {
          lable: "热负荷",
          value: "heatLoad"
        },
        {
          lable: "电负荷",
          value: "electricLoad"
        }
      ],
      buildingList: [],
      tableData: [],
      building: "",
      dateType: ""
    };
  },
  beforeCreate() {
    self = this;
  },
  async mounted() {
    await this.getBuildingList();
    await this.getTableList();
  },
  methods: {
    dateTypeChange() {
      this.query.date = null;
    },
    dateLabel(item) {
      if (this.dateType === "HOUR") {
        return `${item.hour}时`;
      } else if (this.dateType === "DAY") {
        return `${item.day}日`;
      } else {
        return `${item.month}月`;
      }
    },
    async getBuildingList() {
      const result = await this.$fetchGet("/common/findAllPowerEnum");
      this.query.building = result.result.userPower[0].code;
      result.result.userPower.forEach(item => {
        this.buildingList.push({
          value: item.code,
          lable: item.name
        });
      });
    },

    async getTableList() {
      if (!this.query.date) {
        this.$message.warning("请选择日期");
        return;
      }
      const result = await this.$fetchGet(
        `/power/getUserPowerDtoByDateType/${this.query.dateType}/${this.query.date}/${this.query.type}/${this.query.building}`
      );
      this.building = this.query.building;
      this.dateType = this.query.dateType;
      console.log(this.dateType);
      if (this.dateType === "HOUR") {
        this.tableData = result.result.sort(function(a, b) {
          return Number(a.hour) - Number(b.hour);
        });
      } else if (this.dateType === "DAY") {
        this.tableData = result.result.sort(function(a, b) {
          return Number(a.day) - Number(b.day);
        });
      } else {
        this.tableData = result.result.sort(function(a, b) {
          return Number(a.month) - Number(b.month);
        });
      }
    },
    queryClick() {
      this.getTableList();
    },
    exportClick() {
      if (!this.query.date) {
        this.$message.warning("请选择日期");
        return;
      }
      let url = `/power/exportExcelUsrPower/${this.query.dateType}/${this.query.date}/${this.query.type}/${this.query.building}`;
      axios({
        method: "get",
        url: url, // 请求地址
        responseType: "blob",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        const blob = new Blob([res.data]);
        const fileName = "用能侧统计.xls";
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      });
    }
  }
};
</script>

<style lang="less">
.statistics1-container {
  padding: 50px;
  .table-container {
    margin-top: 30px;
    .el-table__header-wrapper {
      .has-gutter tr, th {

        background: #F5F7FA;
      }
      .cell {
        text-align: center;
      }
    }
  }
  .page-container {
    margin-top: 30px;
    text-align: right;
  }
}
</style>